<template>
	<svg class="icon" aria-hidden="true">
	    <use :xlink:href="href" :style="{color}"></use>
	</svg>
</template>

<script setup>
	import {computed} from 'vue';
	const props = defineProps({
		href:{
			type:String,
			required:true
		},
		color:{
			type:String,
			default:"#000"
		},
		size:{
			type:String,
			default:"40rpx"
		}
	})
	const href = computed(()=>{
		return "#icon-"+props.href;
	})
	
</script>

<style lang="scss">
	.icon {
	   width: v-bind("size"); 
	   height: v-bind("size");
	   vertical-align: -0.15em;
	   fill: currentColor;
	   overflow: hidden;
	}
</style>